<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于数组响应式说明</title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>关于数组操作的知识点</li>
				<li>push</li>
				<li>pop</li>
			</ul>
			
			<ul>
				<li v-for="name in names">{{name}}</li>
				<button @click="push">在末尾追加</button>
				<button @click="pop">删除末尾元素</button>
				<button @click="shift">删除开头元素</button>
				<button @click="unshift">在开头追加元素</button>
				<button @click="splice">删除/替换/插入</button>
				<hr >
				<button type="button" @click="btnIndex">不能实现响应式布局的</button>
			</ul>
		</div>
		
		
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				
				el : "#app",
				data : {
					names: ["张三","老四","王五"],
				},
				methods:{
					push(){
						this.names.push("王二麻子","小猪佩琪")
					},
					pop(){
						this.names.pop();
					},
					shift(){
						this.names.shift()
					},
					unshift(){
						this.names.unshift("奥特曼","孙悟空")
					},
					splice(){
						/**
						 * splice语法说明:
						 * 	names.splice("起始位置","改变元素个数","具体的值")
						 *  	插入操作.第二个参数为0.
						 * 		更新操作.第二个参数为处理元素个数.
						 */
						//this.names.splice(0,0,"蜡笔小新")	//新增元素
						//this.names.splice(0,3);				//删除3个元素
						this.names.splice(0,3,"火影忍者","斗罗大陆","校花之贴身高手")
						
					},
					btnIndex(){
						this.names[0] = "花无缺"
						console.log(this.names); //发现数据已经改变,但是没有响应式
					}
				}
			}) 
		</script>
	</body>
</html>
